<template>

  <div class="custom-table-container" :class="{ 'fullscreen-container': tableModel.isFullscreen }">
    <div class="toolbar" v-if="tableModel.showToolbar !== undefined ? tableModel.showToolbar : true">
      <div style="flex:1;" v-if="modelValue.toolbar && modelValue.toolbar.render">
        <component v-model="modelValue.toolbar.query" @update:modelValue="updateToolbarModelValue"
          :is="modelValue.toolbar.render({ handlers })" />
      </div>

      <div style="flex:1;" v-if="modelValue.pageConfig && modelValue.pageConfig.chooseMode == true">

        <el-button :disabled="multipleSelection.length == 0" type="primary"
          @click="handleSelect(false)">确认选择</el-button>
        <el-button type="danger" @click="handleSelect(true)">清除已选</el-button>
      </div>

      <el-button @click="clickFullScreen">
        <vab-icon :icon="isFullscreen ? 'fullscreen-exit-fill' : 'fullscreen-fill'" />
      </el-button>
      <el-popover :width="165">
        <el-radio-group v-model="tableSize">
          <el-radio-button label="large" value="large">大</el-radio-button>
          <el-radio-button label="default" value="default">中</el-radio-button>
          <el-radio-button label="small" value="small">小</el-radio-button>
        </el-radio-group>
        <template #reference>
          <el-button>
            <vab-icon icon="line-height" />
          </el-button>
        </template>
      </el-popover>
      <el-popover :width="300" popper-class="custom-table-checkbox">
        <template #reference>
          <el-button>
            <vab-icon icon="settings-line" />
          </el-button>
        </template>

        <div>
          <el-checkbox v-model="actionColumnVisible" @change="handleChooseActionColumn" label="操作栏"></el-checkbox>
          <el-checkbox v-model="chooseAll" @change="handleChooseAll" label="全选"></el-checkbox>
        </div>
        <div class="columns-container">
          <el-checkbox-group v-model="checkList" @change="handleCheckChange">
            <el-checkbox v-for="(item, index) in finallyColumns" :key="item.field" :disabled="index == 0"
              :label="item.label" :value="item.field" />
          </el-checkbox-group>
        </div>
      </el-popover>
    </div>
    <el-table ref="table" :table-layout="tableLayout" style="width: 100%;" :border="tableModel.border" :data="tableData"
      :size="tableSize" :cell-style="cellStyle" :max-height="maxTableHeight" :row-style="rowStyle"
      :row-key="tableModel.rowKey" :tree-props="tableModel.treeProps" :header-cell-style="headerCellStyle"
      @cell-click="handleCellClick" cell-class-name="test-class-name" @header-dragend="handleHeaderDragend"
      @selection-change="handleSelectionChange" @cell-contextmenu="cellContextMenu">
      <el-table-column type="selection" v-if="tableModel.selectable" width="55" align="center" />
      <!-- 添加序号 -->
      <el-table-column width="55" label="序号" align="center">
        <template #default="scope">{{ scope.$index + 1 + (pageInfo.pageSize * (pageInfo.page - 1)) }}</template>
      </el-table-column>
      <template
        v-for="(item, index) in finallyColumns.filter(value => checkList.filter(v => v === value.field).length > 0)">
        <el-table-column :prop="item.field" :sortable="item.sortable ? 'custom' : false"
          :align="item.style && item.style.align ? item.style.align : (item.align || 'center')"
          :width="item.customWidth ? item.customWidth : item.width ? item.width : 'unset'"
          :min-width="item.minWidth ? item.minWidth : 'unset'" :customKey="item.customKey"
          :tooltip-formatter="tooltipFormatter"
          :show-overflow-tooltip="tooltip ? tooltip : item.tooltip ? item.tooltip : false" :label="item.label">
          <template #header="scope">
            <div style="cursor: pointer;user-select: none" v-if="item.customKey" @click="handleHeaderClick(scope, item)"
              @contextmenu.prevent="handleHeaderRightClick(scope, item)">{{ scope.column.label }}
              <span style="color: var(--el-color-primary);cursor: pointer;user-select: none">•</span>
            </div>
            <div v-else @click="handleHeaderClick(scope, item)"
              @contextmenu.prevent="handleHeaderRightClick(scope, item)">{{ scope.column.label }}</div>
          </template>

          <template #default="scope">


            <template v-if="item.render && typeof item.render === 'function'">
              <component v-if="(!item.renderType || item.renderType == 'component') && item.field"
                :is="item.render({ row: scope.row, item, handlers })" v-model="scope.row[item.field]" />
              <component v-else-if="(!item.renderType || item.renderType == 'component') && !item.field"
                :is="item.render({ row: scope.row, item, handlers })" v-model="scope.row" />
              <component v-else v-html="item.render({ row: scope.row, item, handlers })" />
            </template>
            <template style=";overflow: hidden;text-align: center" v-else>

              <template v-if="item.customKey" class="text-overflow">
                {{ getCustomColumnData(item, scope.row) }}
              </template>
              <template v-else-if="!item.fieldFormat" :class="[item.class ? item.class : 'small']"
                :style="item.style ? typeof item.style === 'function' ? item.style(item) : item.style : {}">
                {{ scope.row[item.field] }}
              </template>

              <!--                {{item.fieldFormat.substring(5,scope.row[item.field].length - 1)}}-->
              <template v-else-if="item.fieldFormat.indexOf('html') != -1">
                <div v-html="scope.row[item.field]"></div>
              </template>


              <div v-else-if="item.fieldFormat.indexOf('date') != -1">
                {{ dateTransform(scope.row[item.field]) }}
              </div>

              <template v-else-if="item.fieldFormat === 'switch'">
                <el-switch v-model="scope.row[item.field]" :class="[item.class ? item.class : '']"
                  @click="item['callFunction'](scope.row, { 'switchStatus': scope.row[item.field] })" />
              </template>

              <template v-else-if="item.fieldFormat === 'img'">
                <el-image preview-teleported v-if="scope.row[item.field]"
                  :preview-src-list="scope.row[item.field].split(',')" :src="scope.row[item.field]" alt="Image"
                  class="image" :class="[item.class ? item.class : 'small']" />
              </template>

              <template v-else-if="item.fieldFormat === 'imgList'" style="display: flex;flex-wrap: wrap;">

                <el-image preview-teleported v-if="scope.row[item.field]"
                  v-for="img in getImgList(scope.row[item.field])" :preview-src-list="scope.row[item.field].split(',')"
                  :src="img" alt="Image" class="image" :class="[item.class ? item.class : '']" />
              </template>
              <template v-else-if="item.fieldFormat === 'tag'">
                <common-status-tag :value="scope.row[item.field]"
                  :value-map="item.valueMap ?? [{ value: 0, label: '否', type: 'warning' }, { value: 1, label: '是', type: 'warning' }]" />
              </template>
              <template v-else-if="item.fieldFormat === 'file'">
                <FilePreview v-model="scope.row[item.field]" v-if="scope.row[item.field]" />
              </template>
              <template v-else-if="item.fieldFormat === 'download'">
                <el-button @click="() => CommonApi.downloadAttachment(scope.row[item.field])">下载</el-button>
              </template>
            </template>


            <span @click.stop="handleReddotClick(scope.row, item)" class="red-dot"
              v-if="modelValue.redDotConfig && modelValue.redDotConfig.show && scope.row[modelValue.redDotConfig.property] && scope.row[modelValue.redDotConfig.property][item.field] > 0">{{
                scope.row[modelValue.redDotConfig.property][item.field] }}</span>





          </template>
        </el-table-column>
      </template>
      <el-table-column v-if="tableModel.actions && tableModel.actions.length > 0" class-name="handle-column"
        align="center" label="操作"
        :width="tableModel.actionWidth ? tableModel.actionWidth : autoWidth != 0 ? autoWidth : ''"
        :show-overflow-tooltip="false" prop="updatedAt" fixed="right">
        <template #default="scope">
          <div class="action-cell">
            <el-button
              v-for="item in tableModel.actions.filter(value => value.isShow === undefined || value['isShow'](scope.row, state)).slice(0, tableModel.actionLimit ?? 10)"
              :style="item.buttonStyle || {}" :type="item.buttonClass || 'primary'" :link="item.buttonType == 'link'"
              :text="item.buttonType == 'text'" @click="handleAction(item, scope.row, scope.$index)">{{ item.name }}
            </el-button>

            <el-dropdown :hide-on-click="false"
              v-if="tableModel.actions && tableModel.actions.filter(value => value.isShow === undefined || value['isShow'](scope.row, state)).length > (tableModel.actionLimit ?? 10)"
              @command="handleCommand($event, scope.row, tableModel.actions)">


              <el-button class="el-dropdown-link" text type="primary">...</el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item :command="item['name']"
                    v-for="item in tableModel.actions.filter(value => value.isShow === undefined || value['isShow'](scope.row, state)).slice(tableModel.actionLimit ?? 10)">
                    <el-button class="el-dropdown-link" :style="item.buttonStyle || {}"
                      :type="item.buttonClass || 'primary'" :link="item.buttonType == 'link'"
                      :text="!item.buttonType || item.buttonType == 'text'">{{ item.name }}</el-button>

                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <el-row type="flex" justify="end" style="margin-top: 10px;"
      v-if="tableModel.pagination && tableModel.rowKey == undefined">
      <el-pagination :page-sizes="[10, 50, 100, 200]" background :page-size="pageInfo.pageSize"
        :current-page="pageInfo.page" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total"
        @current-change="pageChange" @size-change="sizeChange" />
    </el-row>
  </div>
</template>

<script setup>
import _ from 'lodash'
const tableLayout = ref('auto')
const table = ref(null)
ref(false);
const chooseAll = ref(true)
const actionColumnVisible = ref(true)
const checkList = ref([])
const tableSize = ref('default')
const tableParams = ref(null)


const context = inject('searchTablePageContext', {
  handlers: {
    execute: (params) => {
      loadData(params)
    }
  }
})
const { handlers, state } = context
console.log("context", context)

const props = defineProps({
  modelValue: {}
})
defineOptions({
  inheritAttrs: false
})

import { nextTick } from 'vue';
import { TypeUtils } from "/@/utils/TypeUtils";
import VDialog from "/@/utils/dialogUtil";
import SysTableCustomColumnInfoApi from "/@/api/console/SysTableCustomColumnInfoApi";
import treeUtil from "/@/utils/treeUtil";
import CommonApi from '../api/CommonApi';
const previewQueryParams = ref(null)

const searchModel = props.modelValue.search ? ref(props.modelValue.search) : ref({})
const tableModel = ref(props.modelValue)
const color = ref(props.modelValue.color)

const customColumnList = ref(null)
const minWidth = ref(props.modelValue.minWidth)
const tooltip = ref(props.modelValue.tooltip)
const isFullscreen = ref(searchModel.isFullscreen)
const { exit, enter, isFullscreen: _isFullscreen } = useFullscreen()
const tableData = ref([])
const pageInfo = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const tableQuery = ref({})
console.log(tableModel.value);
checkList.value = tableModel.value.columns.map(value => !value.noExported && value.field)
var maxTableHeight = ref(800)
const updateModelValue = { ...props.modelValue }
const tooltipFormatter = (data) => {
  console.log(data);
  return h('div', { style: { width: '200px' } }, data)
}

const query = watch(() => tableModel.value.requestData.query, () => {
  console.log("talbe model query:", tableModel.value.requestData.query)
  tableQuery.value = tableModel.value.requestData.query
}, {
  deep: true,
  immediate: true
})


const dateTransform = (dateStr) => {
  const date = new Date(dateStr)
  // 日期时分秒都为0的情况下 就只取年月日部分
  if (date.getHours() === 0 && date.getMinutes() === 0 && date.getSeconds() === 0) {
    return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, "0")}-${date.getDate().toString().padStart(2, "0")}`
  } else {
    return dateStr
  }
}

const updateToolbarModelValue = (data) => {
  console.log(data);
}
const getCustomColumnData = (item, row) => {

  let field = item.field

  if (Object.keys(row).indexOf(field) !== -1) {
    return row[field]
  }

  let data = row.customColumnData
  let customData = data ? data.filter(value => value.customColumnId == item.customKey) : null;
  if (customData && customData.length > 0) {
    let data = customData[0];
    return data['customColumnValue']
  }
  return null
}


const getImgList = (urls) => {
  if (TypeUtils.isArray(urls))
    return urls
  let split = urls.split(',');
  return split.length > 1 ? [split[0]] : split
}
const handleHeaderDragend = (newWidth, oldWidth, column, event) => {
  if (!props.modelValue.tableName) {
    return
  }
  let property = column.property

}
const finallyColumns = computed(() => {


  const newColumns = tableModel.value ? [...tableModel.value.columns] : [];

  // 遍历 customColumnList
  customColumnList.value && customColumnList.value.forEach((customColumn) => {
    const { columnAfter } = customColumn;
    customColumn.label = customColumn.columnName
    customColumn.tableColumnId = customColumn.id

    // 找到目标列的位置
    const index = newColumns.findIndex((col) => col.label === columnAfter);

    let column = {
      label: customColumn.columnName,
      field: customColumn.columnProperty,
      customKey: customColumn.tableColumnId
    }

    if (index !== -1) {
      // 在目标列之后插入当前自定义列
      newColumns.splice(index + 1, 0, column);
    } else {
      // 如果未找到目标列，则将自定义列添加到末尾
      newColumns.push(column);
    }
  });

  if (tableConfig.value && tableConfig.value.length > 0) {
    for (let column of newColumns) {
      let property = column.field
      let targetConfig = tableConfig.value.filter(value => value.propertyName === property && value.width);
      if (targetConfig && targetConfig.length > 0) {
        column['customWidth'] = targetConfig[0]['width']
        let style = targetConfig[0]['style'];
        if (style) {
          column['style'] = style
        }
      }
    }
  }
  chooseAll.value = true
  for (let newColumn of newColumns) {
    let filter1 = checkList.value.filter(value => value == newColumn.field);
    let b1 = filter1.length == 0;
    if (b1) {
      chooseAll.value = false
    }
  }

  return newColumns
})
const emits = defineEmits(['refresh', 'action', 'update:modelValue', 'selection', 'selectCallback'])

const multipleSelection = ref([])
const handleCheckChange = (c, value) => {
  uploadTableConfig()
}
const handleChooseAll = () => {
  if (chooseAll.value) {
    checkList.value = finallyColumns.value.map(value => value.field)
  } else {
    checkList.value = finallyColumns.value.map(value => value.field).splice(0, 1)
  }
  uploadTableConfig()

}



const handleChooseActionColumn = () => {
}

const uploadTableConfig = () => {

  let columns = finallyColumns.value.map(value => {
    let b = checkList.value.filter(v => v === value.field).length > 0;
    value.visible = b ? 0 : 1
    return value
  });

  let columnList = columns.map((value, index) => {
    return {
      propertyName: value.field,
      columnName: value.label,
      visible: value.visible,
    }
  });


}
const handleReddotClick = (row, item) => {
  if (props.modelValue.redDotConfig && props.modelValue.redDotConfig.click) {
    props.modelValue.redDotConfig.click({ row, item })
  }
}

const handleCommand = (event, row, actions) => {

  actions.filter(value => value.name == event)[0].click({ row, handlers })
  // event(click)
}
const handleCellClick = (row, column) => {
  if (props.modelValue.cellClick) {
    props.modelValue.cellClick({ row, column })
  }
}

const headerCellStyle = (data) => {

  const { row, column, rowIndex, columnIndex } = data
  if (props.modelValue.headerCellStyle && props.modelValue.headerCellStyle.show && props.modelValue.headerCellStyle.render) {
    return props.modelValue.headerCellStyle.render({ row, column })
  }
  return ''
}
const cellStyle = (data) => {
  const { row, column, rowIndex, columnIndex } = data
  if (props.modelValue.cellStyle && props.modelValue.cellStyle.show && props.modelValue.cellStyle.render) {
    return props.modelValue.cellStyle.render({ row, column })
  }
  return ''
}

const rowStyle = (data) => {
  const { row, column, rowIndex, columnIndex } = data
  if (props.modelValue.rowStyle && props.modelValue.rowStyle.show && props.modelValue.rowStyle.render) {
    let render = props.modelValue.rowStyle.render({ row });
    return render
  }
  return ''
}
const handleSelect = (reset) => {
  if (reset) {
    table.value.clearSelection()
  } else {
    props.modelValue.chooseCallback && props.modelValue.chooseCallback(multipleSelection.value)
  }
}
const handleSelectionChange = (val) => {

  if (props.modelValue.multipleSelect === false) {
    if (val.length > 1) {
      table.value.clearSelection()
      if (multipleSelection.value.length > 0) {

        $baseMessage('只能选择一条数据,请先清除已选数据', 'error', 'hey')
      } else {

        $baseMessage('只能选择一条数据', 'error', 'hey')
      }
      return
    }
  }


  multipleSelection.value = val
  emits('selection', val)
}

const handleHeaderRightClick = (row, item) => {
  if (!props.modelValue.tableName) {
    return
  }
  if (props.modelValue.tableColumnId)
    return
  VDialog.open({
    title: '自定义样式',

    content: { //内容初始形式
      type: 'component', //text:"",预留文本
      name: '/common/sysTableColumn/style',
      query: {
        columnName: item.label,
        tableName: tableModel.value.tableName,
        columnProperty: item.field,
        columns: tableModel.value.columns,
        tableColumnId: item.customKey,
        style: item.style
      },

    },

    callBack: async (data) => {
      await getColumnList()
      setTimeout(() => {
        props.modelValue['headerContextMenu'] && props.modelValue['headerContextMenu']()
      }, 1000)
    },
    onClose: () => {
      console.log("对话框已关闭");
    },
  });
}


const handleHeaderClick = (row, item) => {
  if (!props.modelValue.tableName) {
    return
  }
  if (props.modelValue.tableColumnId)
    return
  VDialog.open({
    title: '自定义列',

    content: { //内容初始形式
      type: 'component', //text:"",预留文本
      name: '/common/sysTableColumn/edit',
      query: {
        columnName: item.label,
        tableName: tableModel.value.tableName,
        columns: tableModel.value.columns,
        tableColumnId: item.customKey
      },

    },

    callBack: async (data) => {
      await getColumnList()
      setTimeout(() => {
        props.modelValue['headerContextMenu'] && props.modelValue['headerContextMenu']()
      }, 1000)
    },
    onClose: () => {
      console.log("对话框已关闭");
    },
  });
}


const cellContextMenu = (row, column, cell, event) => {
  event.preventDefault();
  let cellContextMenu = tableModel.value['cellContextMenu'];

  let property = column.property

  let filter = finallyColumns.value.filter(value => value.field == property);
  if (filter.length > 0) {
    column.customKey = filter[0].customKey
  }

  cellContextMenu(row, column)
}



const handleAction = (item, row, index) => {
  let click = item['click'];
  click({ row, index, handlers })
}
const sizeChange = (size) => {

  updateModelValue.data.size = size
  emits('update:modelValue', updateModelValue)
  pageInfo.value.pageSize = size



  // handlers.updatePagination({ _size: size }) // 先更新分页状态
  // handlers.execute() // 再触发请求
  handlers.execute({ _size: size, ...tableQuery.value, _current: pageInfo.value.pageSize })

}
const pageChange = (page) => {

  updateModelValue.data.current = page
  emits('update:modelValue', updateModelValue)
  pageInfo.value.page = page

  // handlers.updatePagination({ _current: page })
  handlers.execute({ _current: page, ...tableQuery.value, _size: pageInfo.value.pageSize })
}
const autoWidth = ref(0)
const getTableList = (data) => {

  const tds = document.querySelectorAll('td.handle-column>.cell>.action-cell')
  if (tds && tds.length) {
    let maxWidth = _.max([...tds].map(td => td.offsetWidth));
    autoWidth.value = maxWidth + 20
  }
}
// watch(() => props.modelValue.data.total, (newTotal) => {
//   pageInfo.value.total = newTotal;
// });


watch(() => props.modelValue, (data) => {
  if (props.modelValue.value.data && props.modelValue.value.data.data) {
    tableData.value = props.modelValue.value.data.data
    console.log(tableData.value);
  }
}, { deep: true })

const clickFullScreen = () => {
  isFullscreen.value = !isFullscreen.value
  emits('update:modelValue', {
    ...props.modelValue,
    isFullscreen: isFullscreen.value,
  })

  isFullscreen.value ? enter() : exit()
}

const updateTableColumnWidth = (records) => {
  nextTick(() => {
    getTableList()
  });
}
const getSelection = () => {
  return multipleSelection.value
}

const tableConfig = ref([])

const getColumnList = async () => {
  if (!props.modelValue.tableName) {
    return
  }
  const { data } = await SysTableCustomColumnInfoApi.getPageData({
    _size: 100,
    tableName: props.modelValue.tableName
  })
  let records = data.records;
  customColumnList.value = records
  nextTick(async () => {
    for (let record of records) {
      checkList.value.push(record.columnName)
    }


  })

}
let timer = null
const handleWindowSizeChange = () => {
  if (timer) {
    clearTimeout(timer)
    timer = null
  }
  let t = setTimeout(() => {
    const root = document.documentElement;
    const vh = parseFloat(getComputedStyle(root).getPropertyValue('--vh')) || window.innerHeight / 100;
    const navHeight = parseFloat(getComputedStyle(root).getPropertyValue('--el-nav-height'));
    const tabsHeight = parseFloat(getComputedStyle(root).getPropertyValue('--el-tabs-height'));
    const padding = parseFloat(getComputedStyle(root).getPropertyValue('--el-padding'));
    const footerHeight = parseFloat(getComputedStyle(root).getPropertyValue('--el-footer-height'));

    // 套用原来的公式
    const containerHeight = vh * 100 - navHeight - tabsHeight - padding * 3 - footerHeight;
    console.log(containerHeight);
    maxTableHeight = containerHeight
  }, 1000)
  timer = t


}


const loadData = async (params) => {
  if (!tableModel.value.requestData || !tableModel.value.requestData.api) {
    return
  }
  let data = await tableModel.value.requestData.api(params)
  if (data) {
    pageInfo.value.total = data && data.data && data.data.total || 0
    let records = data.data && data.data.records || [];
    if (TypeUtils.isArray(data.data)) {
      records = data.data
    }
    if (tableModel.value.requestData.format) {
      records = tableModel.value.requestData.format(records)
      tableData.value = records
    } else {
      if (tableModel.value.rowKey) {
        let treeNodes = treeUtil.treeData(records, [], { id: 'id', parentId: 'pid', children: 'children', ...tableModel.value.treeConfig });
        console.log(treeNodes);
        tableData.value = treeNodes
      } else {
        tableData.value = records
      }
    }
    updateTableColumnWidth(records)
  }
  return data;
}
onMounted(() => {
  console.log("basetable modelvalue:", props.modelValue)
  // if (tableModel.value.requestData && tableModel.value.requestData.query) {
  //   handlers.execute(tableModel.value.requestData.query)
  //   handlers.updateInitParams && handlers.updateInitParams(tableModel.value.requestData.query)
  // }else{
  //   handlers.execute()
  // }
  handlers.execute(tableQuery.value || {})
  // handlers.execute() // 再触发请求
  getColumnList()
  window.addEventListener('resize', handleWindowSizeChange)

})

onBeforeUnmount(() => {
  window.removeEventListener('resize', handleWindowSizeChange)
})

const getXlsTitle = () => {
  console.log("checkList: ", checkList.value)
  return JSON.stringify(finallyColumns.value.filter(value => checkList.value.filter(v => v === value.field && !value.type).length > 0).map(value => {
    console.log(value);
    return {
      field: value.field,
      title: value.label,
      custom: !!value.customKey
    }
  }))
}





// 黑盒暴露方法   供外部调用
defineExpose({
  loadData,
  refreshData: loadData,
  getXlsTitle,
  getSelection

})
</script>

<style lang="scss" scoped>
.toolbar {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin: 0 0 calc(var(--el-margin) / 2) 0;
}



.action-cell {
  overflow: auto;
  display: inline-block;
  flex-direction: row;
  align-items: center;
  white-space: nowrap;
}

.el-table {
  table-layout: fixed;
  /* 防止表格自动调整列宽 */
}

.el-table-column--fixed-right {
  overflow: hidden;
  /* 防止内容超出固定宽度 */
}

.custom-table-container {
  .custom-table-right-tools {
    display: flex;
    align-items: center;
  }
}

:deep(.el-table__row .el-table__cell:has(.bg_class)) {
  background-color: v-bind(color);
}



.red-dot {
  background-color: red;
  display: inline-block;
  cursor: pointer;
  min-width: 16px;
  height: 16px;
  text-align: center;
  line-height: 16px;
  border-radius: 48px;
  font-size: 12px;
  color: #ffffff;
}

// :deep(.el-table .el-table__cell:has(.base-table-custom-render)) {
//   padding: 0px !important;
// }

// :deep(.el-table .el-table__cell:has(.base-table-custom-render)) {
//   padding: 0px !important;
// }

/* 自定义右键菜单样式 */
.context-menu {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  list-style: none;
  padding: 10px;
  margin: 0;
  z-index: 1000;
}

.context-menu li {
  padding: 5px 10px;
  cursor: pointer;
}

.context-menu li:hover {
  background-color: #f0f0f0;
}

.columns-container {
  height: 400px;
  overflow: auto;
}

:deep(.el-checkbox-group) {
  .el-checkbox {
    display: block;
  }
}

.text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
}

.small {
  width: 80px !important;
  max-height: 50px !important;
  object-fit: cover;
}
</style>
